<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-01-14 16:18:30
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-04-11 15:47:39
 * @FilePath: \code\cwp-front\pc-collaboration\src\handles\handle-list\modules\summary\return\components\chooseAttitude.vue
 * @Description: 选择态度弹窗
-->
<script>
  export default {
    name: 'ChooseFlow',
    props: {
      //选中值
      value: {
        type: String
      },
      //选项
      options: {
        type: Array
      },
      //操作类型
      type: {
        type: String
      },
      //按钮名
      label: {
        type: String
      }
    },
    computed: {
      showAttitude(){
        return this.options.some(item => item.value === this.value);
      }
    },
    render() {
      return (
        <ul class="popup-choose-attitude">
          <li>{this.$i18n('coll.operation.state')}</li>
          {this.showAttitude && <li>
            <div>1.{this.$i18n('collaboration.confim.attitude')}</div>
            <a-radio-group
              class="setting-margin"
              options={this.options}
              default-value={this.value}
              onChange={({ target }) => this.$emit('input', target.value)}
            />
          </li>}
          <li>{ this.showAttitude && `2.`}{this.$i18n('collaboration.check.opinion.action', this.label)}</li>
          {(this.type === 'return' || this.type === 'revocation') && (
            <li class="tip">{this.$i18n('collaboration.workflow.trace.hadToRunBack')}</li>
          )}
        </ul>
      );
    }
  };
</script>
<style lang="scss" scoped inline>
  .popup-choose-attitude {
    .setting-margin {
      margin-left: 12px;
    }
    > li {
      margin-bottom: 10px;

      > div {
        margin-bottom: 5px;
      }

      &:first-child {
        ~ li {
          // text-indent: 2em;

          &.tip {
            font-weight: bold;
            text-indent: 0;
          }
        }
      }
    }
  }
</style>
